<template>
  <section class="vue-wrap2">
  <div class="mod-config">
    <div class="search">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <!--<el-input placeholder="请选择采集器信息"-->
                    <!--class="filter-item"-->
                    <!--style="width:200px;"-->
                    <!--@click.native="inputParentMeterCodeName()"-->
                    <!--v-model="dataForm.meterCodeName">-->
          <!--</el-input>-->

          <el-input placeholder="请选择区域信息"
                    style="width: 250px;"
                    class="filter-item"
                    size="small"
                    :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
                    @click.native="deptogglePanel($event)"
                    v-model="currentbuildInfo.buildingName">
            <template slot="prepend">区域选择</template>
          </el-input>
          <div v-if="showTree" class="objectTree w-160" ref="suoShuMenTree">
            <el-tree
              :style="'height:'+containerHeight+'px'"
              ref="buildTree"
              highlight-current
              node-key="buildingId"
              :data="buildDataList"
              :check-on-click-node="true"
              :check-strictly="true"
              :expand-on-click-node="false"
              :props="menuListTreeProps"
              @node-click="selectBuild"
              default-expand-all
            ></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="分类" label-width="40px">
          <el-select v-model="dataForm.energyType"  style="width: 150px;line-height: 30px" placeholder="请选择"  size="small">
            <el-option
              v-for="(item, index) in meterTypeList" :key="index"
              :label="item.paramValue"
              :value="item.paramKey">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="dataList"
      border
      :height="containerHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;margin-top:15px;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="meterCode"
        header-align="center"
        align="center"
        label="计量器编号">
      </el-table-column>
      <el-table-column
        prop="meterName"
        header-align="center"
        align="center"
        label="计量器名称">
      </el-table-column>
      <el-table-column
        prop="collectType"
        header-align="center"
        align="center"
        label="采集类型">
        <template slot-scope="scope">
          {{scope.row.collectType |collectTypeName(collectTypeList)}}
        </template>
      </el-table-column>

      <el-table-column
        prop="ctime"
        header-align="center"
        align="center"
        label="采集时间">
      </el-table-column>
      <el-table-column
        prop="oval"
        header-align="center"
        align="center"
        label="原始值">
        <template slot-scope="scope">
          {{scope.row.oval }} ({{scope.row.collectType |collectTypeUtilName(collectTypeList)}})
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
  </div>
    <!--<el-dialog title="选择采集器信息" :visible.sync="showTree">-->
      <!--<el-tree-->
        <!--:style="'height:'+(containerHeight-100)+'px'"-->
        <!--ref="buildTree"-->
        <!--highlight-current-->
        <!--node-key="id"-->
        <!--:data="treeDataList"-->
        <!--:expand-on-click-node="false"-->
        <!--:props="menuListTreeProps"-->
        <!--@node-click="selectBuild"-->
        <!--default-expand-all-->
      <!--&gt;-->
        <!--<span class="custom-tree-node"  slot-scope="{ node, data }">-->
          <!--<span :dataType="data.type">-->
              <!--&lt;!&ndash; <i class="el-icon-setting"  v-if="data.type=='b'"></i> &ndash;&gt;-->
              <!--<i class="el-icon-star-off"  v-if="data.type=='d'"></i>-->
              <!--{{ node.label }}-->
          <!--</span>-->
        <!--</span>-->
      <!--</el-tree>-->
      <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click="showTree = false">取 消</el-button>-->
      <!--</div>-->
    <!--</el-dialog>-->
  </section>
</template>

<script>
  import * as Util from "@/utils";
  export default {
    data () {
      return {
        dataForm:{
          energyType:'',
          meterCodeName:'',
          meterCode:'',
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        statusList:[{'label':'异常',"value":'0'},{'label':'正常',"value":'1'}],
        meterTypeList:[],
        collectDataList: [],
        meterModelList:[],
        potocolList:[],
        buildDataList: [],
        showTree:false,
        currentbuildInfo: {
          buildingName:'',
        },
        menuListTreeProps: {
          label: "buildingName",
          children: "children"
        },
        treeDataList:[],
        // menuListTreeProps: {
        //   label: "name",
        //   children: "children"
        // },
        collectTypeList:[]
      }
    },
    computed:{
      containerHeight() {
        return Util.getClientHeight() - 300;
      }
    },
    filters: {
      statusName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].value===value){
            return statusList[i].label;
          }
        }
      },
      meterTypeName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].paramKey===value){
            return statusList[i].paramValue;
          }
        }
      },
     collectTypeName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectName;
          }
        }
      },
      collectTypeUtilName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectUnit;
          }
        }
      },
      colectName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].equiCode===value){
            return statusList[i].equiName+'['+statusList[i].equiCode+']';
          }
        }
      }
    },
    activated () {
      this.queryStatic("METER_TYPE")
      this.queryCollectType()
     // this.getDataList()
      this.getBuildDeviceList()
      this.getBuildDataList()
    },
    methods: {
      // 获取数据列表
      getBuildDataList() {
        this.$http({
          url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
          method: "get",
          params: this.$http.adornParams({
            page: 1,
            limit: 10000,
            customerId: this.$cookie.get("customer_id"),
            projectid:this.$cookie.get("cuuren_projectId")
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
          // this.currentbuildInfo = (data.menuList&&data.menuList.length>0)?data.menuList.find(item=>item.parentBuildingId==-1):{},
          this.buildDataList = Util.treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
          console.log(this.buildDataList)
          this.getDataList()
        } else {
          this.buildDataList = [];
        }
      });
      },
      selectBuild (data) {
        //if(checked){
        this.currentbuildInfo = data;
        //查询设备列表
        //console.log(data);
        //this.$refs.buildTree.setCheckedNodes([]);
        //this.$refs.buildTree.setChecked(data.buildingId,checked);
        this.showTree = false
        //}
      },
      deptogglePanel (event) {
        event || (event = window.event)
        event.stopPropagation
          ? event.stopPropagation()
          : (event.cancelBubble = true)
        this.showTree ? this.dephide() : this.depshow()
      },
      depshow () {
        this.showTree = true;
        document.addEventListener('click', this.dephidePanel, false)
      },
      dephide () {
        this.showTree = false
        document.addEventListener('click', this.dephidePanel, false)
      },
      dephidePanel (e) {
        if (
          this.$refs.suoShuMenTree &&
          !this.$refs.suoShuMenTree.contains(e.target)
        ) {
          this.dephide()
        }
      },
      /**
       * 获取采集分项
       */
      queryCollectType() {
        let params = {
          'state': '1' ,
          "customerId":this.$cookie.get('customer_id'),
          'page': 1,
          'limit': 10000,
        }
        this.$http({
          url: this.$http.adornUrl('/ecs/ecscollectitem/list'),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.collectTypeList = data.page.list
        } else {
          this.collectTypeList = []
        }
        });
      },
      getBuildDeviceList(){
        this.$http({
          url: this.$http.adornUrl("/ecs/ecsmeterinfo/getDeviceTree"),
          method: "get",
          params: this.$http.adornParams({
            "customerId":this.$cookie.get('customer_id'),
            'projectId': this.$cookie.get("cuuren_projectId"),
          })
        }).then(res=>{
          if (res && res.code == 0) {
          this.treeDataList = Util.treeDataTranslate(res.data,"id","pid");
          //console.log(this.treeDataList);
          // this.getFirstDevice(this.treeDataList,'m');
          // if(res.data.data.length>0){
          //   this.$nextTick(()=>{
          //     this.dataForm.meterCodeName = this.firstDevice[0].name
          //   this.dataForm.meterCode= this.firstDevice[0].id
          //   this.changeData()
          // })
          // }
        }
      })
      },
      // selectBuild(data){
      //   console.log(data);
      //   if(data.type=='m'){
      //     this.dataForm.meterCodeName = data.name;
      //     this.dataForm.meterCode = data.id;
      //     this.showTree = false;
      //   }
      // },
      inputParentMeterCodeName(){
        this.showTree = true;
      },

      getCollectDataList () {
        this.$http({
          url: this.$http.adornUrl('/ecs/ecscollectequi/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10000000,
            "customerId":this.$cookie.get('customer_id')
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.collectDataList = data.page.list
        } else {
          this.collectDataList = []
        }
      })
      },
      getMeterModelList(){
        this.$http({
          url: this.$http.adornUrl('/ecs/ecsmetermodel/potocolList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 10000000,
            "customerId":this.$cookie.get('customer_id')
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.meterModelList = data.list
          this.potocolList = data.potocolList
        } else {
          this.meterModelList = []
        }
      })
      },
      /**
       * 获取参数枚举
       */
      queryStatic(type) {
        this.$http({
          url: this.$http.adornUrl('/sys/sysstaticdata/getList'),
          method: 'get',
          params: this.$http.adornParams({
            'code': type ,
            "customerId":this.$cookie.get('customer_id')
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.meterTypeList = data.page
        } else {
          this.meterTypeList = []
        }
      });
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/eda/intime'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'buildingId':this.currentbuildInfo.buildingId,
            'meterType':this.dataForm.energyType,
            'meterCode': this.dataForm.meterCode ,
            'projectId':this.$cookie.get("cuuren_projectId"),
            "customerId":this.$cookie.get('customer_id')
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id,this.meterTypeList ,this.collectDataList,this.meterModelList,this.potocolList)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/ecs/ecsmeterinfo/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
<style>
  .el-form-item{
    margin-bottom: 15px;
  }
  .el-button--mini, .el-button--mini.is-round{
    padding: 5px 7px;
    margin: 3px 0px;
  }
  .objectTree {
    margin-left: 89px;
    position: absolute;
    overflow: auto;
    z-index: 100;
    height: 200px;
    /* border: 1px solid #ddd; */
    line-height: normal;
    z-index: 204;
    box-shadow: 0px 0px 1px 1px #e2dfdf;
    margin-top: 3px;
    border-radius: 4px;
    background-color: white;
  }
  .w-160{
    width: 160px
  }
</style>
